

import { StyleSheet, Platform } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0F172A',
  },
  
  // 顶部导航栏
  header: {
    backgroundColor: '#111827',
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  headerContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    marginRight: 12,
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  
  // 滚动视图
  scrollView: {
    flex: 1,
  },
  
  // 审批基本信息
  approvalInfoSection: {
    padding: 24,
  },
  approvalInfoCard: {
    borderRadius: 16,
    padding: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  approvalInfoHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 16,
  },
  approvalInfoLeft: {
    flex: 1,
    marginRight: 16,
  },
  approvalTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 8,
  },
  approvalMeta: {
    flexDirection: 'row',
    gap: 16,
  },
  approvalMetaItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  approvalMetaText: {
    fontSize: 14,
    color: '#9CA3AF',
  },
  approvalStatus: {
    backgroundColor: 'rgba(245, 158, 11, 0.2)',
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 20,
  },
  approvalStatusText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#F59E0B',
  },
  
  // 当前节点信息
  currentNodeContainer: {
    backgroundColor: '#111827',
    borderRadius: 12,
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  currentNodeInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  currentNodeLabel: {
    fontSize: 14,
    color: '#D1D5DB',
  },
  currentNodeName: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6366F1',
  },
  
  // 审批意见
  commentSection: {
    paddingHorizontal: 24,
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#FFFFFF',
    marginBottom: 16,
  },
  commentCard: {
    borderRadius: 16,
    padding: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  commentInput: {
    backgroundColor: '#111827',
    borderWidth: 1,
    borderColor: '#4B5563',
    borderRadius: 12,
    padding: 16,
    color: '#FFFFFF',
    fontSize: 16,
    minHeight: 100,
  },
  
  // 抄送人
  ccSection: {
    paddingHorizontal: 24,
    marginBottom: 24,
  },
  ccSectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  addCCButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  addCCButtonText: {
    fontSize: 14,
    color: '#6366F1',
  },
  ccCard: {
    borderRadius: 16,
    padding: 24,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
      },
      android: {
        elevation: 6,
      },
    }),
  },
  ccRecipientRow: {
    justifyContent: 'flex-start',
    gap: 8,
    marginBottom: 8,
  },
  ccRecipientItem: {
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
    borderWidth: 1,
    borderColor: 'rgba(99, 102, 241, 0.3)',
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 8,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  ccRecipientName: {
    fontSize: 14,
    color: '#FFFFFF',
  },
  removeCCButton: {
    padding: 2,
  },
  noCCMessage: {
    fontSize: 14,
    color: '#9CA3AF',
    textAlign: 'center',
  },
  
  // 底部间距
  bottomSpacing: {
    height: 100,
  },
  
  // 底部操作栏
  bottomActionBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#111827',
    borderTopWidth: 1,
    borderTopColor: '#374151',
    padding: 16,
    flexDirection: 'row',
    gap: 16,
    ...Platform.select({
      ios: {
        paddingBottom: 34, // iPhone底部安全区域
      },
      android: {
        paddingBottom: 16,
      },
    }),
  },
  cancelButton: {
    flex: 1,
    backgroundColor: '#0F172A',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#FFFFFF',
  },
  confirmButton: {
    flex: 1,
    borderRadius: 12,
    overflow: 'hidden',
  },
  confirmButtonGradient: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  confirmButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#FFFFFF',
  },
  
  // 弹窗样式
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContainer: {
    backgroundColor: '#111827',
    borderRadius: 16,
    width: '90%',
    maxWidth: 400,
    maxHeight: '80%',
    overflow: 'hidden',
  },
  modalHeader: {
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#374151',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#FFFFFF',
  },
  modalCloseButton: {
    padding: 4,
  },
  modalContent: {
    padding: 16,
    flex: 1,
  },
  searchContainer: {
    position: 'relative',
    marginBottom: 16,
  },
  searchIcon: {
    position: 'absolute',
    left: 12,
    top: 12,
    zIndex: 1,
  },
  searchInput: {
    backgroundColor: '#0F172A',
    borderWidth: 1,
    borderColor: '#4B5563',
    borderRadius: 12,
    padding: 12,
    paddingLeft: 40,
    color: '#FFFFFF',
    fontSize: 16,
  },
  contactList: {
    maxHeight: 300,
  },
  contactItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    borderRadius: 8,
    marginBottom: 4,
  },
  contactInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  contactAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'rgba(99, 102, 241, 0.2)',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  contactAvatarText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#6366F1',
  },
  contactDetails: {
    flex: 1,
  },
  contactName: {
    fontSize: 16,
    fontWeight: '500',
    color: '#FFFFFF',
    marginBottom: 2,
  },
  contactDepartment: {
    fontSize: 14,
    color: '#9CA3AF',
  },
  modalFooter: {
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#374151',
    alignItems: 'flex-end',
  },
  confirmCCButton: {
    backgroundColor: '#6366F1',
    paddingVertical: 8,
    paddingHorizontal: 24,
    borderRadius: 12,
  },
  confirmCCButtonText: {
    fontSize: 16,
    fontWeight: '500',
    color: '#FFFFFF',
  },
});

